<template>
    <div class="home-container">
        <van-nav-bar title="订单" class="nav-bar" />

        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            

        >
            <van-cell v-for="item in datalist" style="display: flex;" >

            <div style="display: flex;">
                <div class="cell-content">
                    <div>
                    商品订单 {{ item.order_id }} 
                    </div>
                    <div>
                    地址 {{ item.address}} 
                    </div>
                    <div>
                    时间 {{ item.create_time }} 
                    </div>
                    <div>
                    支付金额 {{ item.pay_price }} 
                    </div>
                    <div>
                    实际金额 {{ item.total_price }} 
                    </div>
                    <div>
                    减免金额 {{ item.reduce_price }} 
                    </div>
                    <div>
                    优惠卷名称 {{ item.usercoupon_name }} 
                    </div>
                    购买商品： 
                    <div v-for="iitem in item.order_goods">
                    <div>
                         {{ iitem.name }} 数量 {{ iitem.count }} 单价 {{ iitem.price }}
                    </div>

                    </div>




                </div>
                <div class="cell-right">

                    <button @click="gobuy(item.order_id)">购买</button>
                    
                </div>

            </div>

            </van-cell>
        </van-list>
        



    </div>




</template>




<script setup>
import axios from 'axios'
import { ref } from 'vue'
import { onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

const loading = ref(false)
const finished = ref(false)


const user_id = 1


const datalist = ref([])


const onLoad = () => {
    axios.get(`http://127.0.0.1:8000/order/payorder/?user_id=${user_id}`)
    .then((res) => {
        console.log(res)
        datalist.value = res.data
        loading.value = false
        finished.value = true
    })

}


const gobuy = (order_id) => {
    const data = {
        order_id: order_id,
        user_id: user_id,
    }
    axios.post('http://127.0.0.1:8000/order/pay/',data)
    .then((res) => {
        console.log(res)
        window.location.href = res.data.url
    })

}




</script>




<style scoped>
.home-container {
  width: 400px;
  height: 700px;
  background: white;
  position: relative;
  left: 50%;
  top: 100px;
  border-radius: 20px;
  transform: translate(-50%);
  display: flex; /* 添加 Flexbox 布局 */
  flex-direction: column; /* 垂直方向排列子元素 */
  overflow: auto; /* 添加滚动条 */
  scrollbar-width: none; /* Firefox */
}

.nav-bar {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.cell-content {
    text-align: left;
    display: flex;
    width: 70%;
    flex-direction: column; /* 垂直方向排列子元素 */

}


.cell-right {
    display: flex;
    width: 30%;
    justify-content: center; /* 水平居中 */
    align-items: center;
}



</style>